<template>
    <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="loginForm">
        <FormItem prop="userName">
            <Input prefix="ios-contact" v-model="form.userName" placeholder="请输入用户名" />
        </FormItem>
        <FormItem prop="password">
            <Input prefix="md-lock" icon type="password" v-model="form.password" placeholder="请输入密码" />
        </FormItem>
        <FormItem prop="code" style="width:234px!important">
            <Input prefix="md-lock" icon v-model="form.code" placeholder="请输入验证码" />
            <img class="login-img" @click="handleChangImg" ref="codeImg" />
        </FormItem>
        <FormItem>
            <Button
                @click="handleSubmit"
                type="primary"
                :loading="loading"
                style="width:100%;height:40px;font-size:15px;background:#189f93"
            >登&nbsp;&nbsp;&nbsp;录</Button>
        </FormItem>
    </Form>
</template>
<script>
import { mapActions } from 'vuex';
import { login, getMenuList } from '@/api/user';
/*  登录 actions */
export default {
    name: 'LoginForm',
    props: {
        /* 验证数据不为空 */
        userNameRules: {
            type: Array,
            default: () => {
                return [{ required: true, message: '账号不能为空', trigger: 'blur' }];
            }
        },
        passwordRules: {
            type: Array,
            default: () => {
                return [{ required: true, message: '密码不能为空', trigger: 'blur' }];
            }
        },
        codeRules: {
            type: Array,
            default: () => {
                return [{ required: true, message: '验证码不能为空', trigger: 'blur' }];
            }
        },
        /* 加载 */
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            form: {
                userName: 'admin', // 用户名
                password: '', //密码
                code: '' //验证码
            },
            url: ''
        };
    },
    computed: {
        ...mapActions(['handleLogin', 'getMenuList']),
        rules() {
            return {
                userName: this.userNameRules, //用户名
                password: this.passwordRules, //密码
                code: this.codeRules //验证码
            };
        }
    },
    methods: {
        /* 登录 */
        handleSubmit() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    let userName = this.form.userName;
                    let password = this.form.password;
                    let code = this.form.code;
                    login({ userName, password, code }).then(res => {
                        const ss = res.data;
                        if (res.state === 'success') {
                            getMenuList(ss.roleid).then(res => {
                                const menuList = res.data;
                                const user = { ...ss, menuList };
                                sessionStorage.setItem('user', JSON.stringify(user));
                                this.$router.push({
                                    name: 'home'
                                });
                            });
                        } else {
                            this.handleChangImg();
                            this.form.code = '';
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        handleChangImg() {
            this.$refs.codeImg.src = '/api/Login/GetAuthCode?time=' + Math.random();
        }
    },
    mounted() {
        this.$refs.codeImg.src = '/api/Login/GetAuthCode?time=' + Math.random();
    }
};
</script>
 <style scoped>
.loginForm >>> input {
    height: 40px;
    font-size: 16px;
}
.loginForm >>> i {
    height: 40px;
    line-height: 40px;
}
</style>
<style lang="less" scoped>
.login-img {
    position: absolute;
    top: 0px;
    right: -123px;
    cursor: pointer;
    width: 106px;
}
</style>
